<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt"  prefix="fmt_rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ page language="java" 
	import="java.util.*" 
	import="com.jp.fm.data.*"
	pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
	<head>
    	<base href="<%=basePath%>">
    
    	<title>HFM: Account Summary</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
	
		<link rel="stylesheet" href="jquery-ui-1.10.0.custom/css/cupertino/jquery-ui-1.10.0.custom.css" />
		<script src="jquery-ui-1.10.0.custom/js/jquery-1.9.0.js" type="text/javascript"></script>
  		<script src="jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script>
 
  		<link rel="stylesheet" href="css/fm.css" /> 
  		
  		<style type="text/css">
    
    		fieldset { padding:0; border:0; margin-top:25px; }
		    div#reminders-contain { width: 700px; margin: 20px 0; }
		    div#reminders-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		    div#reminders-contain table td, div#reminders-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		    .ui-dialog .ui-state-error { padding: .3em; }
		    .validateTips { border: 1px solid transparent; padding: 0.3em; }
 		</style>
  	
  		<script type="text/javascript">
  		$(function() {
    	$( "#accordion" ).accordion();
  		});  		
  		</script> 
				  		
  	<c:forEach var="budget" items = "${budgetList}">	
		<script type="text/javascript">
  		$(function() {
    	$( "#progressbar_<c:out value='${fn:replace(budget.category.name, \" \", \"_\")}' escapeXml='true'/>" ).progressbar({
      		value: <c:out value='${budget.currentAmount}' escapeXml='true'/>,
      		max: <c:out value='${budget.amount}' escapeXml='true'/>
    		});
    		
    		<c:choose>
    			<c:when test="${budget.currentAmount / budget.amount > .9 }">
    				$("#progressbar_<c:out value='${fn:replace(budget.category.name, \" \", \"_\")}' escapeXml='true'/> > div").css({ 'background-image': '-webkit-linear-gradient(left, rgb(246, 127, 112), rgb(235, 59, 52))' });
    			</c:when>
    			<c:otherwise>
    				$("#progressbar_<c:out value='${fn:replace(budget.category.name, \" \", \"_\")}' escapeXml='true'/> > div").css({ 'background-image': '-webkit-linear-gradient(left, rgb(148, 218, 82), rgb(47, 167, 54))' });
    			</c:otherwise>
    		</c:choose>
  		});
  		
  		</script>
  	</c:forEach>
  	
  	
  <script type="text/javascript">
  $(function() {
    var reminderName = $( "#reminderName" ),
    	reminderAmount = $( "#reminderAmount" ),
    	reminderAccount = $( "#reminderAccount" ),
    	reminderDatepicker = $( "#reminderDatepicker" ),
    	reminderRepeat = $( "#reminderRepeat" ),
      	allReminderFields = $( [] ).add( reminderName ).add( reminderAmount ).add( reminderAccount ).add( reminderDatepicker ).add( reminderRepeat ),
      	tips = $( ".validateTips" ),
      	addedReminderCount = <c:out value="${fn:length(allBills)}" />,
      
      	budgetName = $( "#budgetName" ),
      	budgetAmount = $( "#budgetAmount" ),
      	budgetCategory = $( "#budgetCategory" ),
      	budgetRepeat = $( "#budgetRepeat" ),
      	allBudgetFields = $( [] ).add( budgetName ).add( budgetAmount ).add( budgetCategory ).add( budgetRepeat ),
      	addedBudgetCount = <c:out value="${fn:length(budgetList)}" />;
 
    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }
    
    function addReminder() {
        
    	var bValid = true;
        allReminderFields.removeClass( "ui-state-error" );
 
        bValid = bValid && checkLength( reminderName, "Name", 1, 200 );
        bValid = bValid && checkLength( reminderAccount, "Account", 1, 200 );
  
        if ( bValid ) {
        
          $( "#remindersTable tbody" ).append( "<tr id=reminder_row_id_" + addedReminderCount + ">" +
            "<td>" + reminderName.val() + "</td>" +
            "<td>" + reminderAmount.val() + "</td>" +
            "<td>" + reminderAccount.val() + "</td>" +              
            "<td>" + reminderDatepicker.val() + "</td>" +
            "<td>" + reminderRepeat.val() + "</td>" +
            "<td><input type='button' name='delete' id='deleteButton' value='Delete' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' onClick='deleteRow(\"remindersTable\", \"reminder_row_id_" + addedReminderCount + "\")' /></td>" +
          "</tr>" );  
          
          $( "#reminders" ).append( "<input type='hidden' name='name_" + addedReminderCount + "' id='name_" + addedReminderCount + "' value='" + escape(reminderName.val()) + "' />" +
            "<input type='hidden' name='amount_" + addedReminderCount + "' id='amount_" + addedReminderCount + "' value='" + reminderAmount.val() + "' />" +
            "<input type='hidden' name='account_" + addedReminderCount + "' id='account_" + addedReminderCount + "' value='" + escape(reminderAccount.val()) + "' />" +              
            "<input type='hidden' name='datepicker_" + addedReminderCount + "' id='datepicker_" + addedReminderCount + "' value='" + reminderDatepicker.val() + "' />" +
            "<input type='hidden' name='repeat_" + addedReminderCount + "' id='repeat_" + addedReminderCount + "' value='" + reminderRepeat.val() + "' />");
          
          addedReminderCount++;
          
          allReminderFields.val( "" );
        } 
    }
    
    function addBudget() {
        
    	var bValid = true;
        allBudgetFields.removeClass( "ui-state-error" );
 
        bValid = bValid && checkLength( budgetName, "Name", 1, 200 );
  
        if ( bValid ) {
        
          $( "#budgetsTable tbody" ).append( "<tr id=budget_row_id_" + addedBudgetCount + ">" +
            "<td>" + budgetName.val() + "</td>" +
            "<td>" + budgetAmount.val() + "</td>" +
            "<td>" + budgetCategory.find(":selected").text() + "</td>" +
            "<td>" + budgetRepeat.val() + "</td>" +
            "<td><input type='button' name='delete' id='deleteButton_" + addedBudgetCount + "' value='Delete' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' onClick='deleteRow(\"budgetsTable\", \"budget_row_id_" + addedBudgetCount + "\")' /></td>" +
          "</tr>" );            
          
          $( "#budgets" ).append(
            "<input type='hidden' name='budget_type_" + addedBudgetCount + "' id='budget_type_" + addedBudgetCount + "' value='" + budgetName.val() + "' />" +
            "<input type='hidden' name='budget_amount_" + addedBudgetCount + "' id='budget_amount_" + addedBudgetCount + "' value='" + budgetAmount.val() + "' />" +
            "<input type='hidden' name='budget_category_" + addedBudgetCount + "' id='budget_category_" + addedBudgetCount + "' value='" + budgetCategory.val() + "' />" +
            "<input type='hidden' name='budget_repeat_" + addedBudgetCount + "' id='budget_repeat_" + addedBudgetCount + "' value='" + budgetRepeat.val() + "' />"); 
          
          addedBudgetCount++;
          
          allBudgetFields.val( "" );
        } 
    }
    
    $("#addReminderButton").click(addReminder);
    $("#addBudgetButton").click(addBudget);
  
    $( "#dialog-form-reminders" ).dialog({
      autoOpen: false,
      height: 500,
      width: 886,
      modal: true,
      buttons: {        
        "Save": function() {
        
        	$( this ).dialog( "close" );
        	$( "#reminders" ).submit();
        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allReminderFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
    
    $( "#dialog-form-budgets" ).dialog({
      autoOpen: false,
      height: 500,
      width: 886,
      modal: true,
      buttons: {        
        "Save": function() {
        
        	$( this ).dialog( "close" );
        	$( "#budgets" ).submit();
        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allBudgetFields.val( "" ).removeClass( "ui-state-error" );
      }
    });
    
    $('.open-reminders-dialog').click(function(){
		$( "#dialog-form-reminders" ).dialog( "open" );
	});
    
    $('.open-budgets-dialog').click(function(){
		$( "#dialog-form-budgets" ).dialog( "open" );
	});
	
  });
  
  $(function() {
    $( "#reminderDatepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true
    });
  });
  
  function deleteRow(tableId, rowId) {
  	table = document.getElementById(tableId).tBodies[0];
    row = document.getElementById(rowId);
    table.removeChild(row);
  }
  </script>
  	
  		  		   
	</head>
	<body>
  		<div id="page" class="page">
	    	<%@ include file="Header.jsp" %> 
	    	<%--<jsp:include page='Header.jsp' flush="true" />--%>
			<div id="main" class="main">		
			
				<jsp:include page='LeftBar.jsp' flush="true" />		   
		    	
		    	<div id="mainbody" class="mainbody">
		    		    	
		    		<div id="bodycontent" class="bodycontent">
		    			
		    			<c:if test="${!empty alerts}">
			    			<div class="section">
				    			<h2>Alerts</h2>			    			
				    			<c:forEach var="alert" items = "${alerts}">			    			
				    				<p class="contenttext"><c:out value='${alert}' escapeXml='false'/></p>			    			
				    			</c:forEach>
			    			</div>
						</c:if>
		    			
		    			<div class="sectionleft" id="upcoming-bills">
		    				<h2><a class="open-reminders-dialog">Upcoming Bills</a></h2>
		    				<c:forEach var="bill" items = "${bills}">			    			
			    				<p class="contenttext"><c:out value='${bill}' escapeXml='true'/></p>			    			
			    			</c:forEach>
		    			</div>
		    			
		    			<div class="sectionright" id="top-categories">
		    				<h2>Top Categories</h2>
		    				<div class="textleft"> 
		    					<h3 >This Month</h3>
		    					<ul class="list">
		    						<c:set var="topCatCounter" value="0" />
		    						<c:forEach var="entry" items = "${topCategoriesThisMonth}">
		    							<c:if test="${topCatCounter lt 5}" >
		    								<li><fmt:formatNumber value='${entry.key}' type='currency'/> - <a class="click-link" url="/fm/secured/ShowTransactions?categoryThisMonth=<c:out value='${entry.value.name}'/>"><c:out value='${entry.value.name}'/></a></li>
		    							</c:if>
		    							<c:set var="topCatCounter" value="${topCatCounter+1}" />
		    						</c:forEach>
		    						<%-- Add spacers for up to 5 rows --%>
		    						<c:forEach begin="${topCatCounter}" end="4" varStatus="loop">
    									<li>&nbsp;</li>
									</c:forEach>
		    					</ul>
		    				</div>
		    				<div class="textright">
		    					<h3>Last 6 Months</h3>
		    					<ul class="list">
		    						<c:set var="topCatCounter" value="0" />
		    						<c:forEach var="entry" items = "${topCategories}">
		    							<c:if test="${topCatCounter lt 5}" >
		    								<li><fmt:formatNumber value='${entry.key}' type='currency'/> - <a class="click-link" url="/fm/secured/ShowTransactions?searchCategory=<c:out value='${entry.value.id}'/>&startDateDatepicker=<c:out value='${monthTopCatsStart}'/>&endDateDatepicker=<c:out value='${monthTopCatsEnd}'/>"><c:out value='${entry.value.name}'/></a></li>
		    							</c:if>
		    							<c:set var="topCatCounter" value="${topCatCounter+1}" />
		    						</c:forEach>
		    						<%-- Add spacers for up to 5 rows --%>
		    						<c:forEach begin="${topCatCounter}" end="4" varStatus="loop">
    									<li>&nbsp;</li>
									</c:forEach>
		    					</ul>
		    					
		    				</div>
		    			</div>
		    		
		    			<div class="section" style="width: 80%">
		    				<c:set var="now" value="<%=new java.util.Date()%>" />
		    				<h2><a class="open-budgets-dialog">Budget <fmt:formatDate pattern="MMMM yyyy" value="${now}" /></a></h2>
		    				<c:forEach var="budget" items = "${budgetList}">		    					
		    					<p 
		    					<c:if test='${budget.currentAmount > budget.amount}'>
		    						<c:out value='class=alerttext'/>
		    					</c:if>
		    					><a class="click-link" url="/fm/secured/ShowTransactions?categoryThisMonth=<c:out value='${budget.category.name}'/>"><c:out value='${budget.category.name}' escapeXml='true'/></a></p>			    			
								<span>&nbsp;</span>		    				
		    					<span class="progressleft">$0</span>
		    					<span class="progressright"><fmt:formatNumber value='${budget.amount}' type='currency'/></span>
		    					<div id="progressbar_<c:out value='${fn:replace(budget.category.name, " ", "_")}' escapeXml='true'/>"></div>
		    					<div class="
		    						<c:if test='${budget.currentAmount > budget.amount}'>
		    							<c:out value='alerttext '/>
		    						</c:if>
		    					caption"><fmt:formatNumber value='${budget.currentAmount}' type='currency'/></div>			    							    			
			    			</c:forEach>
		    			</div>		    		
		    		</div>
		    	</div>		    	
			</div>	  
			<%@ include file="Footer.jsp" %> 
			<%--<jsp:include page='Footer.jsp' flush="true" />--%>  
		</div>
		
		
<div id="dialog-form-reminders" title="Create new reminder">
  <p class="validateTips">All form fields are required.</p>
 
<form>
  <fieldset><legend></legend>
    <label for="reminderName">Name</label>
    <input type="text" name="reminderName" id="reminderName" class="text ui-widget-content ui-corner-all" />
    <label for="reminderAmount">Amount</label>
    <input type="text" name="reminderAmount" id="reminderAmount" class="text ui-widget-content ui-corner-all" style="width: 70px;" />
    <label for="reminderAccount">Account</label>
    <select name="reminderAccount" id="reminderAccount" > 	
    	<c:forEach var="account" items = "${allAccounts}">
			<option value="<c:out value='${account.name}' />"><c:out value='${account.name}' /></option>
		</c:forEach>										
	</select>
	<label for="reminderDatepicker">Due Date</label>
    <input type="text" id="reminderDatepicker" class="text ui-widget-content ui-corner-all" style="width: 70px;"/>
    <label for="reminderRepeat">Repeat</label>
    <select name="reminderRepeat" id="reminderRepeat" > 											
		<option value="Monthly">Monthly</option>
		<option value="Yearly">Yearly</option>
	</select>
    <input type="button" name="add" id="addReminderButton" value="Add" 
    	class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />	
  </fieldset>
  </form>
  
<div id="reminders-contain" class="ui-widget">
  <h2>Existing Reminders:</h2>
  	<form id="reminders" action="/fm/secured/SaveReminders" method="post">  
	  <table id="remindersTable" class="ui-widget ui-widget-content dialogtable">
	    <thead>
	      <tr class="ui-widget-header ">
	        <th>Name</th>
	        <th>Amount</th>
	        <th>Account</th>
	        <th>Due Date</th>
	        <th>Repeat</th>
	        <th>Delete?</th>
	      </tr>
	    </thead>
	    <tbody>
	    	<c:set var="billCounter" value="0" />
	    	<c:forEach var="bill" items = "${allBills}">			    			
			    
		    	<tr id="reminder_row_id_<c:out value='${billCounter}' />">
		      		<td>
		      			<c:out value='${bill.name}' />
		      			<input type='hidden' name='id_<c:out value='${billCounter}' />' id='id_<c:out value='${billCounter}' />' value='<c:out value='${bill.id}' />' />
		      			<input type='hidden' name='name_<c:out value='${billCounter}' />' id='name_<c:out value='${billCounter}' />' value='<c:out value='${bill.name}' />' />
		      		</td>
	        		<td>
	        			<fmt:formatNumber value='${bill.amount}' type='currency'/>
	        			<input type='hidden' name='amount_<c:out value='${billCounter}' />' id='amount_<c:out value='${billCounter}' />' value='<c:out value='${bill.amount}' />' />
	        		</td>
	        		<td>
	        			<c:out value='${bill.account.name}' />
	        			<input type='hidden' name='account_<c:out value='${billCounter}' />' id='account_<c:out value='${billCounter}' />' value='<c:out value='${bill.account.name}' />' />
	        		</td>
	        		<td>
	        			<fmt:formatDate pattern="MM/dd/yyyy" value="${bill.dueDate}" />
	        			<input type='hidden' name='datepicker_<c:out value='${billCounter}' />' id='datepicker_<c:out value='${billCounter}' />' value='<fmt:formatDate pattern="MM/dd/yyyy" value="${bill.dueDate}" />' />
	        		</td>
	        		<td>
	        			<c:out value='${bill.repeatInterval}' />
	        			<input type='hidden' name='repeat_<c:out value='${billCounter}' />' id='repeat_<c:out value='${billCounter}' />' value='<c:out value='${bill.repeatInterval}' />' />
	        		</td>
	        		<td>
	        			<input type="button" name="deleteButton_<c:out value='${billCounter}' />" id="deleteButton_<c:out value='${billCounter}' />" value="Delete" 
	    				class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onClick="deleteRow('remindersTable', 'reminder_row_id_<c:out value='${billCounter}' />')" />
	    			</td>
	        	</tr>
	        	<c:set var="billCounter" value="${billCounter+1}" />
			    					    			
			</c:forEach>
	    </tbody>
	  </table>
	  </form>	
</div>
  
</div>
 
 <div id="dialog-form-budgets" title="Create new budgets">
  <p class="validateTips">All form fields are required.</p>
 
  <form>
  <fieldset><legend></legend>
    <label for="budgetName">Name</label>
    <input type="text" name="budgetName" id="budgetName" class="text ui-widget-content ui-corner-all" />
    <label for="budgetAmount">Amount</label>
    <input type="text" name="budgetAmount" id="budgetAmount" class="text ui-widget-content ui-corner-all" />
    <label for="budgetCategory">Category</label>
    <select name="budgetCategory" id="budgetCategory" > 	
    	<c:forEach var="category" items = "${allCategories}">
			<option value="<c:out value='${category.id}' />"><c:out value='${category.name}' /></option>
		</c:forEach>										
	</select>
    <label for="budgetRepeat">Repeat</label>
    <select name="budgetRepeat" id="budgetRepeat" > 											
		<option value="Monthly">Monthly</option>
		<option value="Yearly">Yearly</option>
	</select>
    <input type="button" name="addBudgetButton" id="addBudgetButton" value="Add" 
    	class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" />	
  </fieldset>  
  </form>
<div id="budgets-contain" class="ui-widget">
  <h2>Existing Budgets:</h2>
  	<form id="budgets" action="/fm/secured/SaveBudgets" method="post">  
	  <table id="budgetsTable" class="ui-widget ui-widget-content dialogtable">
	    <thead>
	      <tr class="ui-widget-header ">
	        <th>Name</th>
	        <th>Amount</th>
	        <th>Category</th>
	        <th>Repeat</th>
	        <th>Delete?</th>
	      </tr>
	    </thead>
	    <tbody>
	    	<c:set var="budgetCounter" value="0" />
	    	<c:forEach var="budget" items = "${budgetList}">
		    	<tr id="budget_row_id_<c:out value='${budgetCounter}' />">
		      		<td>
		      			<c:out value='${budget.type}' />
		      			<input type='hidden' name='budget_id_<c:out value='${budgetCounter}' />' id='budget_id_<c:out value='${budgetCounter}' />' value='<c:out value='${budget.id}' />' />
		      			<input type='hidden' name='budget_type_<c:out value='${budgetCounter}' />' id='budget_type_<c:out value='${budgetCounter}' />' value='<c:out value='${budget.type}' />' />
		      		</td>
	        		<td>
	        			<c:out value='${budget.amount}' />
	        			<input type='hidden' name='budget_amount_<c:out value='${budgetCounter}' />' id='budget_amount_<c:out value='${budgetCounter}' />' value='<c:out value='${budget.amount}' />' />
	        		</td>
	        		<td>
	        			<c:out value='${budget.category.name}' />
	        			<input type='hidden' name='budget_category_<c:out value='${budgetCounter}' />' id='budget_category_<c:out value='${budgetCounter}' />' value='<c:out value='${budget.category.name}' />' />
	        		</td>
	        		<td>
	        			<c:out value='${budget.repeatInterval}' />
	        			<input type='hidden' name='budget_repeat_<c:out value='${budgetCounter}' />' id='repeat_<c:out value='${budgetCounter}' />' value='<c:out value='${budget.repeatInterval}' />' />
	        		</td>
	        		<td>
	        			<input type="button" name="budgetDeleteButton_<c:out value='${budgetCounter}' />" id="budgetDeleteButton_<c:out value='${budgetCounter}' />" value="Delete" 
	    				class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onClick="deleteRow('budgetsTable', 'budget_row_id_<c:out value='${budgetCounter}' />')" />
	    			</td>
	        	</tr>
	        	<c:set var="budgetCounter" value="${budgetCounter+1}" />
        	</c:forEach>
	    </tbody>
	  </table>
	  </form>
</div>
  
</div>
						
	</body>
</html>